<!doctype html>
<html>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'>
    <meta charset="utf-8">
    

    <script>
    	function scanClick() {
	        window.webkit.messageHandlers.ScanAction.postMessage(null);
     	}
    	// <!-- 错误处理 -->
        window.onerror = function(err) {
            log('window.onerror: ' + err)
        }

	    function log(message, data) {
	        var log = document.getElementById('log')
	        var el = document.createElement('p')
	        el.className = 'logLine'
	        el.innerHTML = "message: " + message +':<br/>' + (data ? ':<br/>' + JSON.stringify(data) : '')
	        if (log.children.length) { log.insertBefore(el, log.children[0]) }
	        else { log.appendChild(el) }
	    }
		
		// --------------------------
	    <!-- button标签创建，插入 -->
	    // document.getElementById('buttons').appendChild(document.createElement('br'))
	    // var button = document.getElementById('buttons').appendChild(document.createElement('button'))
	    // button.innerHTML = 'js 调用Native方法'
	    // button.onclick = buttonOnClick

	    // function buttonOnClick = function (e) {} // 这种写法有问题
	    function buttonOnClick(e) {
            //log('JS sending message to Native function name：close', params);
            //window.webkit.messageHandlers.OCFunc.postMessage('close')
            
	         //e.preventDefault();
            
	         // var data = 'action from JS button';
	         // log('JS sending message to Native：', data);
	         //window.webkit.messageHandlers.OCFunc.postMessage(data) //调用原生代码
            
            // 传字典
             //var params = new Object();
             //params["functionName"] = "close";
             //params["parameters"] = "value1"
             //log('JS sending message to Native：', params);
             let msg = "[\"functionName\":\"close\",\"parameters\":\"\"]"
             window.webkit.messageHandlers.OCFunc.postMessage(msg)
	    }

	    document.body.appendChild(document.createElement('br'))

	    var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
	    callbackButton.innerHTML = '发送 testObjcCallback js:test2'
	    callbackButton.onclick = function(e) {
	        e.preventDefault()
	        log('JS calling handler "OCFunc"');

	        // window.webkit.messageHandlers.AppModel.postMessage(NULL或者其他参数)，
            // 参数messageBody里面不能为空什么都不写，不然不会走代理方法
	        /*JS的传出语句如下，那么name = "OCFunc"*/
	        window.webKit.messagehandlers.OCFunc.postMessage("GOGOGO");
	    }

	    function postInfo(name) {
	    	log(name)
	    }
        
    </script>
    <style type='text/css'>
        html { font-family:Helvetica; color:#ddd; }
        h1 { color:steelblue; font-size:24pm; margin-top:24px; }
        button { margin:0 3px 10px; font-size:2pm; }
        .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11pm; }
        div{color: black;line-height:100%;border-color: #ccc; border-width:1px;}
    </style>
</head>
<body>
    <h1>Demo</h1>
    <h2>WKWebView</h2>
    <h3>JavascriptBridge</h3>
    <input type="button" value="扫一扫" onclick="scanClick()" />
    <div id='buttons'>buttons
    	<!-- //    js 调用的alert方法，被wk拦截，在代理方法执行 -->
    	<button onclick="alert('alert ha')">alert</button>
    	<button class="close-btn">OC注入</button><br>
    	<button onclick="buttonOnClick()">js 调用Native方法</button>
    	
    </div><br/>
    <div id='log'>log</div><br/>
    
    
</body>
</html>
